<template>
    <div>
        

        <el-table :data="MyData" border stripe >
            <el-table-column prop="adoid" label="领养ID" width="80">
            </el-table-column>
            <el-table-column prop="userid" label="用户ID" width="120">
            </el-table-column>
            <el-table-column prop="petid" label="宠物ID" width="120">
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="120">
            </el-table-column>
            <el-table-column prop="petname" label="宠物名" width="120">
            </el-table-column>
            <el-table-column label="图片" width="120">
                <template  slot-scope="scope">
                    <img :src="scope.row.image" alt="图片" width="60" height="60" style="border-radius: 50%;">
                </template>
            </el-table-column>
            <el-table-column label="状态" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.adostatus==2" style="color:#37B328">已同意</span>
                  <span v-else-if="scope.row.adostatus==0" style="color: #6495ED">未领养</span>
                  <span v-else-if="scope.row.adostatus==3" style="color: red">已拒绝</span>
                  <span v-else style="color: #EEC900">待处理</span>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="创建日期" width="240">
            </el-table-column>
            <el-table-column prop="note" label="备注信息">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <span v-if="scope.row.adostatus==1">
                        <el-button type="success" @click="allow(scope.row)">同意<i class="el-icon-check"></i></el-button>
                        <el-button type="warning" @click="refus(scope.row.adoid)">拒绝<i class="el-icon-close"></i></el-button>
                    </span>
                    <span v-else-if="scope.row.adostatus==0">
                        <el-button type="info" disabled>暂无申请</el-button>
                    </span>
                    <span v-else>
                        <el-popconfirm  confirm-button-text='确定' cancel-button-text='取消'
                            icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="del(scope.row.adoid)">
                            <el-button type="danger" slot="reference">删除记录</el-button>
                        </el-popconfirm>
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[5, 10, 15]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

    </div>
</template>
<script>
import axios from 'axios';

export default {
    name: "Adoption",
    props: {

    },
    data() {
        return {
            typ:0,
            u_name: '',
            pageNum: 1,
            pageSize: 10,
            total: 0,
            MyData:[],
            tableData: [],
            form: {},
            formX: {},
            collapseBtnClass: 'el-icon-s-fold',
            isCollapse: false,
            sideWidth: 200,
            logoTextShow: true,
            dialogFormVisible: false,
            multipleSelection: [],
            deleteIds: [],
            n: 0,
            dialogImageUrl: '',
            dialogVisible: false,
            imgfile:[],
            isShow:true,
            utable:[],
            ptable:[]
        }
    },
    created() {
        
        this.load().then(()=>{
            console.log(this.MyData);
        })
        
    },
    mounted(){
        this.load();
        console.log(this.MyData);
    },
    methods: {
        deleteData() {
            this.$confirm('您确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                console.log(this.deleteIds);
                var p=new URLSearchParams();
                p.append("userid",this.deleteIds);
                axios({
                    
                    url:"http://localhost:8080/user/delBatch",
                    method:"delete",
                    params:p
                }).then(obj=>{
                    if(obj.data){
                        this.$message.success("删除成功");
                        this.load();
                    }else{
                        this.$message.error("删除失败");
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
                this.load();
            });
        },
        handleSelectionChange(dataList) {
            this.deleteIds = [];
            dataList.forEach(item => {
                this.deleteIds.push(item.userid)
            })
            console.log(this.deleteIds);
        },
        refus(id){
            var p=new URLSearchParams();
            p.append("adoid",id);
            axios({
                url:"http://localhost:8080/adoption/refuseAdo",
                method:"put",
                params:p
            }).then(obj=>{
                if(obj.data.res){
                    this.$message.success(obj.data.message);
                    var k=new URLSearchParams();
                    k.append("petid",obj.data.petid);
                    k.append("status",0);
                    axios({
                        url:"http://localhost:8080/pet/updateById",
                        method:"put",
                        data:k
                    }).then(r=>{
                        this.load();
                    })
                }else{
                    this.$message.error(obj.data.message);
                }
            });
        },
        del(id) {
            var p=new URLSearchParams();
            p.append("adoid",id);
            axios({
                url:"http://localhost:8080/adoption/delAdo",
                method:"delete",
                params:p
            }).then(obj=>{
                if(obj.data){
                    this.$message.success("删除成功");
                    this.load();
                }else{
                    this.$message.error("删除失败");
                }
            });
        },
        edit(row) {
            this.isShow=true;
            this.imgfile=[];
            this.form = row;
            this.imgfile.push({name:"123.jpg", url:row.avatar});
            this.dialogFormVisible = true;
        },
        save() {
            // var t=new URLSearchParams();
            // t.append("userid",this.form.userid);
            var param=new URLSearchParams();
            param.append("userid",this.form.userid);
            param.append("username",this.form.username);
            param.append("email",this.form.email);
            param.append("avatar",this.dialogImageUrl);
            param.append("address",this.form.address);
            var t=new URLSearchParams();
            t.append("username",this.form.username);
            t.append("email",this.form.email);
            t.append("avatar",this.dialogImageUrl);
            t.append("address",this.form.address);
            
            if(this.typ==0){
                axios({
                    url:"http://localhost:8080/user/updateUser",
                    method:"put",
                    data:param
                }).then(obj => {
                    if(obj.data){
                        this.$message.success("修改成功");
                        this.quit();
                        this.load();
                        
                    }else{
                        this.$message.error("修改失败");
                    }
                })
            }else{
                axios({
                    url:"http://localhost:8080/user/addUser",
                    method:"post",
                    data:t
                }).then(obj=>{
                    if(obj.data){
                        this.$message.success("新增成功");
                        this.quit();
                        this.load();
                    }else{
                        this.$message.error("新增失败,该用户名已被使用");
                    }
                });
                this.typ=0;
            }
            
            
        },
        add() {
            this.isShow=false;
            this.imgfile=[];
            this.dialogFormVisible = true;
            this.typ=1;
            this.form = {};
        },
        reset() {
            this.u_name = '';
            this.load();
        },
        load() {
            this.isShow=true;
            var param=new URLSearchParams();
            param.append("page",this.pageNum);
            param.append("size",this.pageSize);
            return axios({
                url:"http://localhost:8080/adoption/adoGet",
                method:"get",
                params:param

            }).then(obj => {

                this.tableData=obj.data.records;
                this.total=obj.data.total;
                return Promise.all([this.load2(), this.load3()]);
            }).then(()=>{
                this.MyData = this.tableData;
            })
            
            
                
        },
        load2(){
            return axios({
                    url:"http://localhost:8080/user/getAllUser",
                    method:"get"
                }).then(res=>{
                    this.utable=res.data;
                    var i;
                    var j;
                    for(i=0;i<this.tableData.length;i++){
                        for(j=0;j<this.utable.length;j++){
                            if(this.utable[j].userid==this.tableData[i].userid){
                                this.tableData[i].username=this.utable[j].username;
                            }
                        }
                    }
                    
                });
        },
        load3(){
            return axios({
                    url:"http://localhost:8080/pet/getAllPet",
                    method:"get"
                }).then(ssh=>{
                    this.ptable=ssh.data;
                    var m;
                    var n;
                    for(m=0;m<this.tableData.length;m++){
                        for(n=0;n<this.ptable.length;n++){
                            if(this.ptable[n].petid==this.tableData[m].petid){
                                this.tableData[m].petname=this.ptable[n].petname;
                                this.tableData[m].image=this.ptable[n].image;
                            }
                        }
                    }
                });
        },
        handleSizeChange(pageSize) {
            
            this.pageSize = pageSize;
            this.load();
        },


        handleCurrentChange(pageNum) {
            
            this.pageNum = pageNum;
            this.load();
        },
        imgSuccess(res, file) {
      this.dialogImageUrl=res.data;
      this.form.image=this.dialogImageUrl;
      
      //这里我是用一个fileList数组存取，当保存的时候进行图片路径处理
    },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      submitUpload(value){
        if(value==1){
            this.$refs["upload1"].submit();
        }
      },
      myUpload(content){
        var param=new FormData();
        param.append("uploadFile",content.file);
        axios({
            url:"http://localhost:8080/user/upload",
            method:"post",
            data:param
        }).then(obj=>{
            this.$message.success(obj.data.message);
            if(obj.data.status==1){
                
                this.dialogImageUrl=obj.data.data;
                console.log(this.dialogImageUrl);

                this.save();
                this.clearFiles();
            }
        })
      },
      
    clearFiles () {
      this.$refs['upload1'].clearFiles();
    },

    allow(value){
        console.log(value);
        var param=new URLSearchParams();
        param.append("adoid",value.adoid);
        param.append("userid",value.userid);
        param.append("petid",value.petid);
        param.append("note",value.note);
        axios({
            url:"http://localhost:8080/adoption/petAllow",
            method:"put",
            data:param
        }).then(obj=>{
            if(obj.data){
                var m=new URLSearchParams();
                //此处继续，写一个findbyId
                m.append("petid",value.petid);
                m.append("status",2);
                axios({
                    url:"http://localhost:8080/pet/updateById",
                    method:"put",
                    data:m
                }).then(res=>{
                    if(res.data){
                        this.$message.success("已同意该申请");
                        location.reload();
                        this.load();
                    }
                    else{
                        this.$message.error("同意失败");
                    }
                })
                
            }
        });
    }
    }
}
</script>